<template>
	<div>
		<div
			class="comment-item" 
			v-for="(item,index) in reply"
			:key="index"
		>
			<div class="flex">
				<div class="detail">
					<div class="user">
						<span class="user-name" v-if="item.userinfo">{{item.userinfo.name}} 回复 <span style="color: #fb7299;">@ {{item.parent_user_info.name}}</span></span>
						<span class="user-name" v-else>null</span>
						<div class="icon">
							<span>{{item.comment_date  || '00-00'}}</span>
						</div>
					</div>
					<div class="content" @click="replyComment(item.comment_id)">
						{{item.comment_content || 'null'}}
						<span class="publishs">【回复】</span>
					</div>
				</div>
			</div>
			<!-- 回复评论 -->
			<div class="reply" v-if="item.child && item.userinfo">
				<comment-reply :reply="item.child" />
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	export default {
		name: 'commentReply',
		props: {
			reply: {
				type: Array,
				default() {
					return []
				}
			}
		},
		methods: {
			replyComment(id) {
				bus.$emit('replyComment',id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		padding: 12px;
		background-color: #f4f4f4;
		margin-right: 12px;
	}
	.comment-item{
		// border-bottom: 1px solid #e7e7e7;
		.head{
			width: 30px;
			height: 30px;
			flex-shrink: 0;
			margin-right: 14px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.detail{
			flex: 1;
			.user{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.user-name{
					font-size: 13px;
					color: #757575;
				}
				.icon{
					font-size: 12px;
					color: #999;
					span{
						vertical-align: 4px;
						margin-left: 5px;
					}
				}
			}
			.time{
				font-size: 12px;
				color: #999;
				margin-top: 8px;
			}
			.content{
				margin-top: 9px;
				font-size: 13px;
				white-space: pre-line;
				word-break: break-word;
				line-height: 20px;
				position: relative;
				.publishs{
					position: absolute;
					right: 0;
					color: #fb7299;
				}
			}
		}
	}
</style>